Chapter 17: TodoDataService - Login Component

We will first implement a login authentication system in this chapter, as without it, we can’t allow users to log in

and show their todos. In the next chapter, we will list the todos for each user.

Fill in login.js with the following code:

Replace Entire Code

import React, {useState} from 'react';

import Form from 'react-bootstrap/Form';

import Container from 'react-bootstrap/Container';

import Button from 'react-bootstrap/Button';

const Login = props => {

const [username, setUsername] = useState("");

const [password, setPassword] = useState("");

const onChangeUsername = e => {

const username = e.target.value;

setUsername(username);

}

const onChangePassword = e => {

const password = e.target.value;

setPassword(password);

}

const login = () => {

props.login({username: username, password: password});

props.history.push('/');

}

return(

<Container>

<Form>

<Form.Group className="mb-3">

<Form.Label>Username</Form.Label>

<Form.Control

type="text"

placeholder="Enter username"

value={username}

onChange={onChangeUsername}

/>

</Form.Group>

<Form.Group className="mb-3">

<Form.Label>Password</Form.Label>

<Form.Control

type="password"

placeholder="Enter password"

value={password}

onChange={onChangePassword}

/>

</Form.Group>

<Button variant="primary" onClick={login}>

Login

</Button>

</Form>

</Container>

)

}

export default Login;

And in App.js, fill in the below codes:

Modify Bold Code

…

import Nav from 'react-bootstrap/Nav';

import Navbar from 'react-bootstrap/Navbar';

import Container from 'react-bootstrap/Navbar';

import TodoDataService from './services/todos';

function App() {